<template>
	<view class="oauth-body">
		<view class="oauth-body-link">
			<view class="oauth-body-title">正在连接</view>
			<image class="oauth-body-icon" src="/static/logo/logo.jpg"></image>
			<view class="oauth-body-animate">
				<view class="oauth-body-animate-dot"></view>
				<view class="oauth-body-animate-dot"></view>
				<view class="oauth-body-animate-dot"></view>
			</view>
			<image class="oauth-body-icon" :src="oauthIcon"></image>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		oauthType: String
	},
	data() {
		return {
			oauthIcon: '/static/images/oauth/wechat.png'
		};
	},
	created() {
		if (this.oauthType) {
			this.oauthIcon = '/static/images/oauth/' + oauthType + '.png';
		}
		// #ifdef MP-WEIXIN
		this.oauthIcon = '/static/images/oauth/wechat.png';
		// #endif
	}
};
</script>

<style>
.oauth-body {
	width: 750rpx;
	position: absolute;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
}
.oauth-body-link {
	width: 420rpx;
	height: 112rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}
.oauth-body-icon {
	height: 112rpx;
	width: 112rpx;
}
.oauth-body-animate {
	width: 100rpx;
	height: 16rpx;
	display: flex;
	justify-content: space-between;
}
.oauth-body-animate-dot {
	height: 16rpx;
	width: 16rpx;
	background: #c2c2c2;
	border-radius: 16rpx;
	animation: dot-flash 0.5s infinite;
}
.oauth-body-animate-dot:nth-child(1) {
	animation-delay: 0.2s;
}
.oauth-body-animate-dot:nth-child(2) {
	animation-delay: 0.4s;
}
.oauth-body-title {
	position: absolute;
	top: -128rpx;
	margin-left: 50%;
	transform: translateX(-50%);
	font-size: 40rpx;
	font-weight: 700;
}
@keyframes dot-flash {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.4;
	}
}
</style>
